<template>
  <el-dialog
    v-el-drag-dialog="{updataFull, updataDialogWidth}"
    :fullscreen="isfullscreen"
    :append-to-body="true"
    :width="setDialogWidth('450px')"
    :visible="dialogVisible"
    :show-close="false"
    :title="title"
    @open="open"
  >
    <el-form ref="form" class="pr-20" label-width="auto" :model="form" :rules="rules">
      <!-- <el-col :span="24">
        <el-form-item :label="$t('NODE_ID')" prop="facilityId">
          <el-input
            v-model.trim="form.facilityId"
            maxlength="32"
            :readonly="true"
          />
        </el-form-item>
      </el-col> -->
      <el-col :span="24">
        <el-form-item :label="$t('NAME')" prop="facilityName">
          <el-input
            v-model.trim="form.facilityName"
            maxlength="32"
            :placeholder="$t('ENTER_NAME', { msg: $t('NAME') })"
          />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item :label="$t('FACILITY_TYPE')" prop="facilityType">
          <el-select
            v-model="form.facilityType"
            :placeholder="$t('SELECT_NAME', { msg: $t('FACILITY_TYPE') })"
            clearable
          >
            <el-option
              v-for="item in dictList.FACILITY_TYPE"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item :label="$t('LONGITUDE')" prop="longitude">
          <el-input v-model="form.longitude" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item :label="$t('LATITUDE')" prop="latitude">
          <el-input v-model="form.latitude" />
        </el-form-item>
      </el-col>
    </el-form>
    <template v-slot:footer>
      <template>
        <el-button @click="cancel">{{ $t('CANCEL') }}</el-button>
        <el-button type="primary" @click="$debounce(save)">{{ $t('SAVE') }}</el-button>
      </template>
    </template>
  </el-dialog>
</template>
<script>
  import { mapGetters } from 'vuex'

  export default {
    props: {
      dialogVisible: {
        type: Boolean,
        default: false
      },
      params: {
        type: Object,
        default() {
          return {
            type: 'add'
          }
        }
      }
    },
    data() {
      return {
        form: {
          facilityId: '',
          facilityName: '',
          facilityType: '',
          latitude: '',
          longitude: ''
        }
      }
    },
    computed: {
      ...mapGetters(['dictList']),
      title() {
        const title = this.$t('GEO_NODE')
        return (this.params.type === 'add' ? this.$t('ADD') : this.$t('MOD')) + title
      },
      rules() {
        return {
          facilityName: [
            {
              required: true,
              message: this.$t('ENTER_NAME', { msg: this.$t('NAME') }),
              trigger: 'blur'
            },
            {
              min: 1,
              max: 32,
              message: this.$t('LENGTHMSG', { minMsg: 1, maxMsg: 32 }),
              trigger: ['blur', 'change']
            }
          ],
          facilityType: [
            {
              required: true,
              message: this.$t('SELECT_NAME', { msg: this.$t('FACILITY_TYPE') }),
              trigger: 'change'
            }
          ],
          longitude: [
            {
              required: true,
              validator: (rule, value, callback) => {
                if (!value) {
                  callback(this.$t('PLEASE_ENTER_LONGITUDE'))
                } else {
                  const regLng =
                    /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,6})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/
                  if (regLng.test(value)) {
                    callback()
                  } else {
                    callback(this.$t('LONGITUDE_REG'))
                  }
                }
              },
              trigger: ['blur', 'change']
            }
          ],
          latitude: [
            {
              required: true,
              validator: (rule, value, callback) => {
                if (!value) {
                  callback(this.$t('PLEASE_ENTER_LATITUDE'))
                } else {
                  const regLat = /^(\-|\+)?([0-8]?\d{1}\.\d{0,6}|90\.0{0,6}|[0-8]?\d{1}|90)$/
                  if (regLat.test(value)) {
                    callback()
                  } else {
                    callback(this.$t('LATITUDE_REG'))
                  }
                }
              },
              trigger: ['blur', 'change']
            }
          ]
        }
      }
    },
    methods: {
      open() {
        this.$refs.form && this.$refs.form.clearValidate()
        this.form = this.$options.data().form
        this.form = Object.assign(this.form, this.params)
      },
      close() {
        this.$emit('update:dialogVisible', false)
      },
      cancel() {
        this.$emit('cancel', this.form)
        this.$emit('update:dialogVisible', false)
      },
      save() {
        this.$refs.form.validate(valid => {
          if (!valid) return
          this.$emit('modFacility', this.form)
        })
      }
    }
  }
</script>
